<script setup>
import { reactive, ref, watch } from "vue";
const props = defineProps({
  dialogConfig: Object,
  formData: Object,
  roleGroupList: Array,
  echoData: Object,
});
const emits = defineEmits(["submit"]);

const ruleFormRef = ref();
const formData = reactive({
  account: "",
  name: "",
  password: "",
  password_confirmation: "",
  role: "",
});

const formDataRule = reactive({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  name: [{ required: true, message: "请输入姓名/备注", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  password_confirmation: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    { required: true, message: "两次密码不一致", validator: validatePwd },
  ],
  role: [{ required: true, message: "请选择角色", trigger: "change" }],
});
function validatePwd(e, val, callback) {
  if (val != formData.password) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
}
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const obj = props.dialogConfig.type == "add" ? formData : formDatas;
      emits("submit", obj);
    }
  });
};

const ruleFormRefedit = ref();
const formDatas = reactive({
  id: 0,
  account: "",
  name: "",
  role: "",
  password: "",
});
const formDatasRule = reactive({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  name: [{ required: true, message: "请输入姓名/备注", trigger: "blur" }],
  role: [{ required: true, message: "请选择角色", trigger: "change" }],
});

watch(
  () => props.echoData,
  (newV) => {
    if (newV) {
      formDatas.id = newV.id;
      formDatas.account = newV.account;
      formDatas.name = newV.real_name;
      formDatas.role = newV?.roles[0]?.id;
    }
  },
  { immediate: true }
);
</script>

<template>
  <el-form
    v-if="dialogConfig.type == 'edit'"
    ref="ruleFormRefedit"
    :model="formDatas"
    label-width="auto"
    status-icon
    :rules="formDatasRule"
  >
    <el-form-item prop="account" label="账号">
      <el-input v-model="formDatas.account" />
    </el-form-item>
    <el-form-item prop="name" label="姓名/备注">
      <el-input v-model="formDatas.name" />
    </el-form-item>
    <el-form-item prop="role" label="角色">
      <el-select v-model="formDatas.role" placeholder="请选择角色">
        <el-option
          v-for="item in roleGroupList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input v-model="formDatas.password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRefedit)">提交</el-button>
      <el-button @click="dialogConfig.visible = false">取消</el-button>
    </el-form-item>
  </el-form>
  <el-form
    v-if="dialogConfig.type == 'add'"
    ref="ruleFormRef"
    :model="formData"
    label-width="auto"
    status-icon
    :rules="formDataRule"
  >
    <el-form-item prop="account" label="账号">
      <el-input v-model="formData.account" />
    </el-form-item>
    <el-form-item prop="name" label="姓名/备注">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input v-model="formData.password" />
    </el-form-item>
    <el-form-item prop="password_confirmation" label="重复密码">
      <el-input type="password" v-model="formData.password_confirmation" />
    </el-form-item>
    <el-form-item prop="role" label="角色">
      <el-select v-model="formData.role" placeholder="请选择角色">
        <el-option
          v-for="item in roleGroupList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="dialogConfig.visible = false">取消</el-button>
    </el-form-item>
  </el-form>
</template>
